<style>
.mui-input-row .mui-input-clear~.mui-icon-clear {
    right: 40%;
    top: 15px;
}

.tips{
	margin: 30px 15px;
}

.btn-gray {
    background: #cccccc !important;
    color: #fff !important;
}

</style>
<script src="__STATIC__mobile/mui/js/mui.min.js"></script>

<div class="mui-content">

	<div class="userbanner">
		<img src="{$wxuserinfo.headimgurl}" width="60px" height="60px" onerror="javascript:this.src='<?php echo C('UPYUN_DOMAIN').C('SHARE_DEFAULT_IMG');?>';">
		<span class="vip"></span>
		<div class="usertext"><?php echo $wxuserinfo['nickname'] ? $wxuserinfo['nickname'] : C("SITE_NAME");?></div>
	</div>



	<div class="mui-content-padded" style="margin: 5px;">

		<form>

			<div class="mui-input-row" style="padding: 5px; height: 50px;">
				<input type="tel" id="mobile" class="mui-input-clear" placeholder="请输入您的手机号" maxlength="11" style="width: 60%;">
				
				<button type="button" id="getcode" class="mui-btn mui-btn-danger btn-gray border-none" onclick="settime()" style="width: 35%; padding: 12px 10px;float:right;margin-right:5px;">获取验证码</button>
			</div>
			
			
			<div class="mui-input-row" style="padding: 5px; height: 50px;">
				<input type="tel" id="smscode" class="mui-input-clear okinpput" placeholder="请输入短信验证码" maxlength="4">
			</div>

			<div class="mui-button-row" style="margin:30px;height:80px;">
				<button type="button" id="sendbtn"  class="mui-btn mui-btn-primary greenbg border-none" onclick="checkcode()" style="width:100%;padding: 10px;">立 即 登 录 (请勿使用他人手机号登录)</button>
			</div>
			
			<input type="hidden" id="code_id" value="">
			
		</form>
	</div>
	
	
	
	<div class="tips">
		<h4 style="color:red;">注意事项:</h4>
		<h6 style="color:red;">1.请用自己的常用手机号/常用微信号登录,请勿使用他人信息,请勿代人操作。</h6>
		<h6 style="color:red;">2.若手机号已停机请联系客服处理,登录以后手机号会与微信绑定,不可更改。</h6>
		<h6>3.请查收手机短信,验证码5分钟内有效,过期失效。</h6>
		<h6>4.客服不会向您索要短信验证码,请不要将短信验证码告诉任何人。</h6>
		<h6 style="display:none;">5.暂时只允许CEO、皇冠、大皇冠登录手机商城系统。</h6>
		<h6>5.如您无法登录,请联系客服为您录入资料。</h6>
		<h6>6.客服电话: <a href="tel://<?php echo C("SITE_TEL");?>"><?php echo C("SITE_TEL");?></a></h6>
	</div>
	
</div>

<script type="text/javascript"> 
var countdown=60; 

function settime() {

	mobilecode = document.getElementById("getcode");
	
    if (countdown == 0){ 
    	mobilecode.innerHTML="获取验证码"; 
    	mobilecode.removeAttribute("disabled");
        countdown = 60; 
        return;
    }else {
    	if(countdown == 60){
    		var mobile = $("#mobile").val();
    		if(mobile == ''){
    			showerror("请输入手机号");
    			return false;
    		}
    		if(!isMobile(mobile)){
    			showerror("请检查手机号是否正确");
    			return false;
    		}
    		
    		//发送短信
    		sres = sendSMS(mobile);
    		if(!sres){
    			//发送失败
    			return false;
    		}
    	}
    	mobilecode.setAttribute("disabled", true); 
    	mobilecode.innerHTML="重新发送(" + countdown + ")"; 
        countdown--; 
    }
    
	setTimeout(function() { settime() },1000);
}

function sendSMS(mobile){
	var url = "/mobile/check/sendsms?mobile="+mobile;
	var result = false;  
	$.ajax({
		url : url,
		type : 'GET',
		dataType : 'json',
		async: false, //关闭异步
		success : function(data) {

			if(data.ret == 0){
				$("#code_id").val(data.data);
				showsuccess("已发送");
				result = true;
			}else{
				showerror(data.msg);
				result = false;
			}
			
		},
       error: function() {
    	   showerror("网络错误");
    	   result = false;
       }
       
	});
	
	return result;//注意必须在ajax之外返回, 在ajax里面无法正常返回
	//http://blog.csdn.net/fairyhawk/article/details/8136986
}

function checkcode(){
	
	var url = "/mobile/check/checkcode";
	var code_id = $("#code_id").val();
	var mobile = $("#mobile").val();
	var code = $("#smscode").val();
	
	if(!isMobile(mobile)){
		showerror("请检查手机号是否正确");
		return false;
	}
	
	if(!code_id.length){
		showerror("请先获取验证码");
		return false;
	}
	
	if(code.length != 4){
		showerror("请输入4位验证码");
		return false;
	}

	$.ajax({
		url : url,
		type : 'POST',
		dataType : 'json',
		data: {"code_id":code_id,"mobile":mobile,"code":code},
		success : function(data) {
			if(data.ret == 0){
				showsuccess(data.msg,data.url);
			}else{
				showerror(data.msg);
			}
		},
       error: function() {
    	   showerror("网络错误");
       }
       
	});
}


$(function(){
	
	$("#mobile").focus(function(){
		$(".mui-input-row .mui-input-clear ~.mui-icon-clear").css("right","40%");
	});

	$(".okinpput").focus(function(){
		$(".mui-input-row .mui-input-clear ~.mui-icon-clear").css("right","1%");
	});

	$("#mobile").bind('input propertychange', function() { 
		if($("#mobile").val().length == 11){
			$("#getcode").removeClass("btn-gray");
		}else{
			$("#getcode").addClass("btn-gray");
		}
	});
	
});

//防止挡住键盘
/*
1、通过对相对依赖定位的body进行top偏移。
	其中_target.clientHeight可以替换为个人认为合适的值。
	当然可以编码页面期定义为元素的属性，通过值获取来记性个人化偏移
2、但让也可以单独定位特定元素，监听获得焦点和失去焦点事件
*/
var _body = document.querySelector("body");

window.addEventListener("focusin", function () {
	var event = event || window.event;
	var _target = event.target;
	_body.style.top = (-_target.offsetTop + _body.scrollTop + _target.clientHeight) + "px";
});

window.addEventListener("focusout", function () {
	_body.style.top = "0px"
});


</script>